<!--  线 + 柱混合图 -->
<template>
  <div ref="echartRef" :class="className" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, markRaw, watch, reactive } from "vue";
const echartRef = ref<HTMLElement | null>(null);

const props = defineProps({
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  datas: {
    type: Object,
    default: () => {
      return {
        nums: 1,
        unit: "",
        x: [],
        y1: {
          name: "",
          data: [],
        },
        y2: {
          name: "",
          data: [],
        },
        stack: "1",
      };
    },
    required: true,
  },
});

function getOption() {
  let option = {
    grid: {
      top: "20%",
      left: "2%",
      right: "2%",
      bottom: "0%",
      containLabel: true,
    },
    legend: {
      itemWidth: 12,
      itemHeight: 12,
      x: "right",
      y: "top",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    xAxis: {
      type: "category",
      data: props.datas.x,
      axisPointer: {
        type: "shadow",
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.6)",
        },
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#FFF",
          fontSize: 12,
        },
        lineStyle: {
          color: "rgba(255,255,255,.26)",
          type: "dashed",
        },
      },
    },
    yAxis: {
      name: props.datas.unit,
      type: "value",
      min: 0,
      axisLine: {
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#D0DEEE",
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.26)",
          type: "dashed",
        },
      },
    },
    series: [],
  };
  if (props.datas?.nums == 1) {
    option.series = [
      {
        name: props.datas.y1.name,
        type: "bar",
        data: props.datas.y1.data,
        barWidth: 20,
        stack: props.datas.stack,
        stackStrategy: "negative",
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#FFF",
            fontSize: 12,
          },
        },
        itemStyle: {
          borderRadius: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#28EBE4" },
            { offset: 1, color: "rgba(40, 235, 228, 0.10)" },
          ]),
        },
      },
    ];
  } else {
    option.series = [
      {
        name: props.datas.y1.name,
        type: "bar",
        data: props.datas.y1.data,
        stack: "total",
        barWidth: 20,
        itemStyle: {
          color: "#FAE17D",
          borderRadius: 2,
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#FFF",
            fontSize: 12,
          },
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(28, 99, 232, .04)",
        },
      },{
        name: props.datas.y2.name,
        type: "bar",
        data: props.datas.y2.data,
        stack: "total",
        barWidth: 20,
        itemStyle: {
          color: "#796EDB",
          borderRadius: 2,
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#FFF",
            fontSize: 12,
          },
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(28, 99, 232, .04)",
        },
      },
      {
        name: props.datas.y3.name,
        type: "bar",
        data: props.datas.y3.data,
        stack: "total",
        barWidth: 20,
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#FFF",
            fontSize: 12,
          },
        },
        itemStyle: {
          borderRadius: 2,
          color: "#28EBE4",
        },
      },
    ];
  }
  return reactive(option);
}
let chart = ref<any>("");
onMounted(() => {
  // 图表初始化
  chart.value = markRaw(echarts.init(echartRef.value));

  chart.value.setOption(getOption());

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
watch(
  props,
  (data) => {
    chart.value.setOption(getOption());
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;

  .download {
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
